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The Internet is a network of networks 







• The Internet is the descendant of ARPANET (Advanced 
Research Projects Agency Network) developed for the US DoD 

• The initial goal was to research the possibility of remote 
communication between machines 

• Critical step was development of the TCP/IP protocol (1977) 

TCP Transmission Control Protocol 
IP Internet Protocol 

• Vinton Cerf's postcard analogy for TCP/IP: 

• A document is broken up into postcard-sized chunks (packets) 

• Each postcard has its own address and sequence number 

• Each postcard travels independently to the final destination 

• The document is reconstructed by ordering the postcards 

• If one is missing, the recipient can request for it to be resent 

• If a post-office is closed the postcard is sent a different way 

• Congestion and service interruptions do not stop transmission 
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The first connection between two hosts 








Image Ref: http://www.computerhistory.org 
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The Internet grew extremely 


rapidly! 
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• We often use the phrases “the WWW' and “the Internet" 
interchangeably, however they are different entities 

• The WWW is a service that operates over the internet 

• The concept of the WWW combines 4 ideas: 

• hypertext 

• resource identifiers (URI, URL) 

• client-server model of computing (web servers/browsers) 

• markup language (HTML) 

• These were the brainchild of Tim Berners-Lee from CERN 
who released his first browser in 1991 

• All clients and servers in the WWW speak the language of 
HTTP (HyperText Transfer Protocol) 
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• There are several benefits to dynamically generating content: 

• We don't have to store loads of pages 

• The content is completely up-to-date 

• We can respond to/interact with the user 

• Every site that involves a transaction (eg. Google, Amazon, 
NED) is generating dynamic content 
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Web servers serve content on request across the network 



• The web server is responsible for: 

• accepting requests for content described by the URL 

• checking whether access is permitted and requesting 
authentication if necessary 

• sending (or serving) the content back to the browser 

• A web server is the machine and the process serving content 

• The most popular web server software now is: 

• Apache is an open source web server (Unix/Mac OS X/Win) 

• Microsoft IIS is the main Windows web server (Win only) 
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GET /index. html HTTP/1.0 




• HyperText Transfer Protocol (http) is the standard protocol 
for transferring web content 

• The server listens on port 80 waiting for connections 

• The web browser connects to the server, and sends a request 

• The server responds with an error code or the web content 
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■ runs a program to generate the web content 



• This program gets run every time the given URL is requested 

• The server passes the http request details to the program 

• The program returns the web content or an error code 

• Each web server interacts with the programs differently: 

• Apache uses the Common Gateway interface (CGi) 

• Microsoft IIS uses Active Server Pages (asp) 



□ ► < 



Tara Murphy 



Astroinformatics School: Web Technologies 



1 ► 1 - 0^0 

17th February, 2011 




THE UNIVERSITY OF 

SYDNEY 



The Internet 
OOOOO 



CGI Web services 

000*0 OOOOO 



HTML and CSS 
ooooooooooo 



Browsing the web uses the client-server model 



10 



• The client-server model involves networked interaction between: 

• a client - in this case the web browser 

• a server - in this case the web server 

• Dynamic content is generated on the server side 

• The advantages of server side are: 

• We are not running programs on low-powered client computers 

• Typically the data you want to present is on server side 

• The client will restrict program functionality for security 

• The disadvantage of server side are: 

• The server requires lots of processing power 
particularly when there are many simultaneous clients 

• The client side is often quite powerful anyway 

• Lots of information may need to be passed back and forth 
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The CGI client-server 


interaction 







HTML 
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A web service is an application accessible over the Internet 



• Web services emerged amidst a lot of hype 

• A web service is a network accessible interface to application 
functionality, built using standard internet technologies. 

• Powerful new way to build software systems from distributed 
components 

• In other words, if an application can be accessed over a 
network using protocols such as HTTP, XML, SMTP etc. 
then it is a web service. 
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• Recall the CGI client-server model 

• In the case of a user looking at a webpage 

• the client is the web browser 

• the server is the web server (and programs running on it) 

• On the WWW information is always returned to the client in 
the form of a webpage (HTML). 

• The key to web services is that they return information in a 
programmatic form (ie: they can return a string, float, array, 
object, just like an function). 

• In the final stage of a chain of web services, the information 
may be presented to the user e.g. a webpage may be 
generated. 
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Example web services 











• Stock price quotes 

• Amazon web services 

• provides access to the entire Amazon database of books/prices 

• you could aggregate prices for multiple online bookshops 

• Google web services 

• originally just access to Google search engine results 

• people used to do this manually anyway - screen scraping 

• now extended to other services, e.g. Google maps 

• And lots of astronomy/VO applications 

• Andreas will show some examples this afternoon 
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The HyperText Markup Language 







• HTML marks up the structure of a document for publishing 
on the WWW 

• It tells the browser how to interpret and display the document 

• Different browsers interpret things differently (!) 

• There are two main standards: HTML 4(5) and XHTML 1.0 

• These are developed by W3C 

W3C the World Wide Web Consortium 

• All HTML documents should declare which standard they are 
using 
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1 < ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

2 "http : //www . w3 . org/TR/html4/ strict . dtd" > 

3 <HTML> 

4 <HEAD> 

5 <TITLE>My first HTML document</TITLE> 

e </HEAD> 

7 <BQDY> 

8 <P>Hello world! 

9 </BODY> 

10 </HTML> 
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My first HTML document CO ’ 
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The basic unit of HTML is the element 







• HTML includes element types to represent paragraphs, 
hypertext links, lists, tables, images, etc 

• Each element consists of three parts 

Q start tag e.g. <title> 

© content e.g. my homepage 
© end tag e.g. </title> 

• A tag is an element name enclosed in angle brackets 

• Some elements have no content e.g. <br> or <hr> 

• Elements may have associated properties ( attributes ) 

• Attributes and their values appear inside the start tag 
e.g. <div id="sectionl"> 
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You only need a small set of elements to create a website 



Element: start/end tags 


Description 


<html> </html> 


Starts and ends a HTML document 


<title> </title> 


Text that appears in the title bar 


<head> </head> 


Information about the document 


<body> </body> 


The main part of the document 


<p> </p> 


A paragraph 


<hr /> 


A horizontal line 


<br /> 


A line break 


<a href="url"> </a> 


A link 


<img src="url" /> 


An image 


< ! — comment — > 


Comments that are not displayed 



□ ► < 



Tara Murphy 



Astroinformatics School: Web Technologies 



17th February, 2011 




THE UNIVERSITY OF 

SYDNEY 



The Internet 
OOOOO 



CGI Web services 

OOOOO OOOOO 



HTML and CSS 22 

00000*00000 



You only need a small set of elements to create a website 



Element: start/end tags 


Description 


<div> </div> 


A section in the document 


<span> </span> 


An inline section in a document 


<ul> </ul> 


An unordered list (bullet points) 


<ol> </ol> 


An ordered list 


<li> </li> 


A list item 


<table> </table> 


Encloses a table 


<tr> </tr> 


A row in a table 


<td> </td> 


A cell within a row 


<pre> </pre> 


Enclosed text that stays in its raw format 
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ntroduced into HTML 4.0 to solve a problem 



• We have focused on the structural aspects of HTML 

• In fact that is what HTML was originally designed for 

• <table> = “This is a table” 

• <p> = “This is a paragraph" 

• Layout was the job of the browser 

• As the WWW exploded, more people started writing 
documents 

• The two major browsers (Internet Explorer and Netscape) 
added new HTML tags and attributes to the original HTML 
specification e.g. <font> 

• It became hard to separate structure and presentation 
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Formatting before CSS 


was inefficient 







• Before CSS all formatting had to be included as attributes in 
HTML tags 

1 <font f ace="Verdana, Arial" size="+l" color="blue"> 

2 Hello, World! 

3 </font> 

• There are several disadvantages to this way of doing things 

• Information occurs in many locations — > redundancy — > errors 

• Updating multiple occurrences of information is 
time-consuming 

• Formatting information is hard-coded in HTML document 

• HTML elements can describe format/presentation and 
content/structure 

• Other formatting tags you might be familiar with a <b> 

(bold), <i> (italics). . we do not recommend using these 
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Hello World! the CSS 


version 









• To reproduce the previous HTML using CSS we need two files 

0 A HTML page (e.g. mypage .html) containing this 

1 <head> 

2 Clink href="css/mystyle . css" rel="stylesheet" 

3 type="text/css" /> 

4 </liead> 

5 <body> 

6 <p>Hello, World !</p> 

7 </body> 

® An accompanying style sheet file (e.g. mystyle.css) 

1 p { 

2 color: blue; 

3 font-size: small; 

font-family: Verdana, Arial, sans-serif; 

5 } 
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HTML and CSS should be validated 







• The W3C site provides tools for validating your website 

• they check what standard you claim to be using 

• then check all the syntax in your document complies with that 
standard 

• The validators are free and easy to use, so there is no excuse! 

• http://validator.w3.org/ 

• http : // j igsaw . w3 . org/ css-validator/ 

m: r™vfwK c *s/ 
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